import React, { useEffect } from 'react';
import { Modal, Input, Form, Button, Divider, message } from 'antd';
import { useSelector } from 'react-redux';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './index.module.scss';
import { editPassword } from '@/service'


export default (props) => {
  const { visible, handleShut, handleSubmit, useName } = props;
  const [form] = Form.useForm(); // 创建表单实例
  const onSubmit = async () => {
    try {
      await form.validateFields().then(async (values) => {
        const { password, checkPassword } = values;
        // let params = {
        //   password
        // }
        // editPassword(params).then(response => {
        //   if (response.code === 1) {
        //     message.success('密码修改成功');
        //     handleSubmit();
        //   } else {
        //     message.error('密码修改失败');
        //   }
        // }).catch(e => {
        //     message.error(e?.message);
        // });
      })

    } catch (error) {
      // message.error('Something went wrong!');
    }
  };
  const handleClose = () => {
    handleShut();
    form.resetFields();
  }
  return (
    <Modal
      title="重置密码"
      open={visible}
      closeIcon={null}
      className='custom-notitle-modal'
      width={550}
      maskClosable={false}
      footer={null}
    >
      <Form
        form={form}
        name="Password_form"
        className={`custom-form-primary ${styles.psdform}`}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 12 }}
      >
        <Form.Item
          name="name"
          label='登录名'
          initialValue={useName}
        >
          <span>{useName}</span>
        </Form.Item>
        <Form.Item
          label='新密码'
          name="password"
          rules={[
            { required: true, message: '请输入密码!' }
          ]}
        >
          <Input.Password
            placeholder="密码" />
        </Form.Item>
        <Form.Item
          label='再次输入新密码'
          name="checkPassword"
          dependencies={['password']} // This makes the validation rule depend on the password field.
          rules={[
            { required: true, message: '请再次输入新密码!' },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入的密码不一致!'));
              },
            }),
          ]}
        >
          <Input.Password
            placeholder="密码" />
        </Form.Item>
        <div className={styles.btnGroup}>
          <Form.Item noStyle>
            <Button className={styles.cancelBtn} onClick={handleClose}>
              取消
            </Button>
            <Button type='primary' htmlType="submit" onClick={onSubmit}>
              确认
            </Button>
          </Form.Item>
        </div>
      </Form>
    </Modal>
  );
}
